<template>
  <el-drawer v-model="drawer">
    <div class="wrapper">
      <el-space>
        <span>期间使用质检规则数:</span>
        <span class="font-des">限定账号更新时间的是</span>
      </el-space>
      <div class="m-t-15">
        <el-date-picker
          v-model="filter.startTime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        >
        </el-date-picker>
      </div>
      <div class="m-t-20">
        <p class="m-b-15">服务到期时间：</p>
        <el-radio-group v-model="filter.time">
          <el-radio :label="1">7天内</el-radio>
          <el-radio :label="2">15天内</el-radio>
          <el-radio :label="3">30天内</el-radio>
        </el-radio-group>
      </div>
      <div class="m-t-20">
        <p class="m-b-15">企业账号状态</p>
        <el-radio-group v-model="filter.status">
          <el-radio :label="4">未使用</el-radio>
          <el-radio :label="5">暂停使用</el-radio>
          <el-radio :label="6">使用中</el-radio>
          <el-radio :label="7">活跃</el-radio>
        </el-radio-group>
      </div>
      <div class="m-t-20">
        <div class="flex m-b-15">
          <span>账号类型:</span>
          <span class="font-des">限定账号更新时间的是</span>
        </div>
        <el-radio-group v-model="filter.updateTime">
          <el-radio :label="8">体验</el-radio>
          <el-radio :label="9">正式</el-radio>
        </el-radio-group>
      </div>
      <div class="m-t-20">
        <div class="flex m-b-15">
          <span>企业关键词:</span>
          <span class="font-des">企业名称包含的关键词是</span>
        </div>
          <el-input
            v-model="filter.colselect"
            placeholder="模糊搜索"
          ></el-input>
      </div>
      <div class="m-t-20">
        <p class="title m-b-15">客户搜索:</p>
        <el-input v-model="filter.client" placeholder="模糊搜索"></el-input>
      </div>
      <div class="m-t-20">
        <el-button>取消</el-button>
        <el-button class="button" type="primary">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  setup() {
    let filter = reactive({
      time: "",
      startTime: "",
      status: "",
      updateTime: "",
      key: "",
      client: "",
      colselect: "",
    });
    let drawer = ref(false)
    return {
      filter,
      drawer
    };
  },
  methods: {
    changeDrawer(val: boolean) {
      this.drawer = val
    }
  }
});
</script>
<style lang="scss" scoped>
.wrapper {
  padding-left: 40px;
  width: 100%;
}
</style>
